<template>
  <HomePanel title="人气推荐" subTitle="人气爆款 不容错过">
    <template #main>
      <ul class="good-list">
        <li v-for="item in hotsList" :key="item.id">
          <router-view to="/">
            <!-- <img :src="item.picture" /> -->
             <!-- 自动懒加载 -> main.js -->
            <img v-img-lazy="item.picture" />
            <p class="title">{{ item.title }}</p>
            <p class="alt">{{ item.alt }}</p>
          </router-view>
        </li>
      </ul>
    </template>
  </HomePanel>
</template>

<script setup lang="ts">
import { defineOptions, ref, onMounted } from "vue";
// 引入组件
import HomePanel from "./HomePanel.vue";
//引入API
import { reqGetHotList } from "@/apis/home";
defineOptions({
  name: "HomeHot",
});
let hotsList = ref([]); //储存人气推荐数据的数组
onMounted(() => {
  getHotList();
});
//获取-人气推荐的数据
const getHotList = async () => {
  let res: any = await reqGetHotList();
  hotsList.value = res.result;
};
</script>

<style scoped lang="scss">
.good-list {
  display: flex;
  height: 426px;
  background-color: #fff;
  li {
    width: 306px;
    height: 406px;
    transition: all 0.5s;
    margin: 5px;
    background: #f0f9f4;
    &:hover {
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }
    img {
      width: 306px;
      height: 306px;
    }
    p {
      font-size: 20px;
      padding: 10px;
      text-align: center;
    }
    .alt {
      color: #999;
      font-size: 18px;
    }
  }
}
</style>
